import React, { Component } from 'react'
import {
  Grid, Table, Button, Checkbox, Header, Label,
} from 'semantic-ui-react'
import { TableRow, OptionIcon } from 'components/memberTable'
import {
  Stage, Layer, Rect, Text, Circle, Line,
} from 'react-konva'
import { BasicButton } from 'components/Button'

export default class componentName extends Component {
  render() {
    return (
      <Grid columns={3} divided>
        <Grid.Row>
          <Grid.Column>
            <BasicButton floated="right">添加节点</BasicButton>
            <Header as="h3" dividing>
              关键点
            </Header>
            <Table basic="very">
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>
                    <Checkbox />
                  </Table.HeaderCell>
                  <Table.HeaderCell
                    style={{
                      wordBreak: 'keep-all',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    名称
                  </Table.HeaderCell>
                  <Table.HeaderCell>颜色</Table.HeaderCell>
                  <Table.HeaderCell>必要</Table.HeaderCell>
                  <Table.HeaderCell />
                </Table.Row>
              </Table.Header>
              <Table.Body>
                <TableRow>
                  <Table.Cell collapsing>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell>头顶</Table.Cell>
                  <Table.Cell width={2}>
                    <Label circular color="red" size="mini" />
                  </Table.Cell>
                  <Table.Cell>是</Table.Cell>
                  <Table.Cell>
                    <OptionIcon className="options" color="blue" name="pencil alternate" />
                    <OptionIcon className="options" color="red" name="remove" />
                  </Table.Cell>
                </TableRow>
                <TableRow>
                  <Table.Cell collapsing>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell collapsing>脖子</Table.Cell>
                  <Table.Cell width={2}>
                    <Label circular color="red" size="mini" />
                  </Table.Cell>
                  <Table.Cell>否</Table.Cell>
                  <Table.Cell>
                    <OptionIcon className="options" color="blue" name="pencil alternate" />
                    <OptionIcon className="options" color="red" name="remove" />
                  </Table.Cell>
                </TableRow>
              </Table.Body>
            </Table>
          </Grid.Column>
          <Grid.Column>
            <BasicButton floated="right">添加连线</BasicButton>
            <Header as="h3" dividing>
              关键点
            </Header>
            <Table basic="very">
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>
                    <Checkbox />
                  </Table.HeaderCell>
                  <Table.HeaderCell
                    style={{
                      wordBreak: 'keep-all',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    起点
                  </Table.HeaderCell>
                  <Table.HeaderCell>终点</Table.HeaderCell>
                  <Table.HeaderCell />
                </Table.Row>
              </Table.Header>
              <Table.Body>
                <TableRow>
                  <Table.Cell>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell>头顶</Table.Cell>
                  <Table.Cell>脖子</Table.Cell>
                  <Table.Cell>
                    <OptionIcon className="options" color="blue" name="pencil alternate" />
                    <OptionIcon className="options" color="red" name="remove" />
                  </Table.Cell>
                </TableRow>
                <TableRow>
                  <Table.Cell collapsing>
                    <Checkbox />
                  </Table.Cell>
                  <Table.Cell collapsing>脖子</Table.Cell>
                  <Table.Cell>头顶</Table.Cell>
                  <Table.Cell>
                    <OptionIcon className="options" color="blue" name="pencil alternate" />
                    <OptionIcon className="options" color="red" name="remove" />
                  </Table.Cell>
                </TableRow>
              </Table.Body>
            </Table>
          </Grid.Column>
          <Grid.Column>
            <Stage width={400} height={400}>
              <Layer>
                <Line points={[200, 10, 200, 50]} stroke="black" />
                <Line points={[200, 50, 160, 50]} stroke="black" />
                <Line points={[200, 50, 240, 50]} stroke="black" />
                <Line points={[200, 50, 200, 100]} stroke="black" />
                <Line points={[200, 100, 200, 150]} stroke="black" />
                <Line points={[200, 150, 200, 200]} stroke="black" />
                <Line points={[160, 50, 160, 100]} stroke="black" />
                <Line points={[240, 50, 240, 100]} stroke="black" />
                <Line points={[160, 100, 120, 140]} stroke="black" />
                <Line points={[240, 100, 290, 100]} stroke="black" />
                <Line points={[200, 200, 160, 200]} stroke="black" />
                <Line points={[200, 200, 240, 200]} stroke="black" />
                <Line points={[160, 200, 120, 300]} stroke="black" />
                <Line points={[240, 200, 270, 300]} stroke="black" />
                <Circle x={200} y={10} radius={10} fill="green" />
                <Circle x={200} y={50} radius={10} fill="green" />
                <Circle x={160} y={50} radius={10} fill="green" />
                <Circle x={240} y={50} radius={10} fill="green" />
                <Circle x={200} y={100} radius={10} fill="green" />
                <Circle x={200} y={150} radius={10} fill="green" />
                <Circle x={200} y={200} radius={10} fill="green" />
                <Circle x={160} y={100} radius={10} fill="green" />
                <Circle x={240} y={100} radius={10} fill="green" />
                <Circle x={120} y={140} radius={10} fill="green" />
                <Circle x={290} y={100} radius={10} fill="green" />
                <Circle x={160} y={200} radius={10} fill="green" />
                <Circle x={240} y={200} radius={10} fill="green" />
                <Circle x={120} y={300} radius={10} fill="green" />
                <Circle x={270} y={300} radius={10} fill="green" />
              </Layer>
            </Stage>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}
